<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/videoWeb/layui-v2.5.7/layui/css/layui.css">
    <link rel="stylesheet" href="/videoWeb/element/element.css">
    <script src="/videoWeb/js/Jquery.js" ></script>
    <script src="/videoWeb/layui-v2.5.7/layui/layui.js"></script>
    <script src="/videoWeb/js/vue.js"></script>
    <script src="/videoWeb/element/element.js"></script>
    <title>视频管理</title>
</head>
<body>

<div id="app">

    <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
        <el-menu-item>视 频 网 站 后 台 管 理 系 统</el-menu-item>
    </el-menu>

    <el-row class="tac" style="width: 28%;float: left;">
        <el-col :span="12">
            <el-menu
                    default-active="2"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b" >
                <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>导航一</span>
                    </template>
                    <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="1-1">选项1</el-menu-item>
                        <el-menu-item index="1-2">选项2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分组2">
                        <el-menu-item index="1-3">选项3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="1-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="1-4-1">选项1</el-menu-item>
                    </el-submenu>
                </el-submenu>
                <el-menu-item index="2">
                    <i class="el-icon-video-camera-solid"></i>
                    <span slot="title">视频管理</span>
                </el-menu-item>
                <el-menu-item index="3" disabled>
                    <i class="el-icon-document"></i>
                    <span slot="title">导航三</span>
                </el-menu-item>
                <el-menu-item index="4">
                    <i class="el-icon-setting"></i>
                    <span slot="title">导航四</span>
                </el-menu-item>
            </el-menu>
        </el-col>
    </el-row>

    <div style="float:left;">
        <el-breadcrumb separator-class="el-icon-arrow-right" style="margin: 10px 0px;">
            <el-breadcrumb-item :to="{ path: '/' }">后台管理</el-breadcrumb-item>
            <el-breadcrumb-item>视频管理</el-breadcrumb-item>
        </el-breadcrumb>

        <div class="demo-input-suffix" style="margin-bottom: 10px">
            <el-input placeholder="请输入类型名称" prefix-icon="el-icon-search" v-model="typeName" style="width: 20%">
            </el-input>
            <el-input placeholder="请输入用户名称" prefix-icon="el-icon-search" v-model="userName"style="width: 20%" >
            </el-input>
            <el-button @click="handleCurrentChange" type="primary" icon="el-icon-search">搜索</el-button>
        </div>

        <template>
            <el-table :data="videoList" border style="width: 100%">
                <el-table-column prop="id" label="Id"  align="center"></el-table-column>
                <el-table-column prop="videoTitle" label="视频标题"  align="center"></el-table-column>
                <el-table-column prop="explain" label="表述内容" width="100%" align="center"></el-table-column>
                <el-table-column label="视频首图"  align="center">
                    <template slot-scope="scope">
                        <el-popover placement="top-start" title="" trigger="hover">
                            <img :src="scope.row.imgSrc" alt="" style="width: 150px;height: 150px">
                            <img slot="reference" :src="scope.row.imgSrc" style="width: 100%;height: 100%">
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="typeName" label="视频类型"  align="center"></el-table-column>
                <el-table-column label="视频展示"  align="center">
                    <template slot-scope="scope">
                        <video slot="reference" :src="scope.row.videoSrc" style="width: 100%;height: 100%"></video>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建日期" width="100%" align="center"></el-table-column>
                <el-table-column prop="username" label="用户姓名"  align="center"></el-table-column>
                <el-table-column prop="headImg" label="用户头像" width="100%" align="center">
                    <template slot-scope="scope" align="center">
                        <el-popover placement="top-start" title="" trigger="hover">
                            <img :src="scope.row.headImg" alt="" style="width: 150px;height: 150px">
                            <img slot="reference" :src="scope.row.headImg" style="width: 100%;height: 100%">
                        </el-popover>
                    </template>
                </el-table-column>

                <el-table-column prop="videoView" label="浏览次数"  align="center"></el-table-column>
                <el-table-column label="操作" width="200px" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="edit(scope.row.id)" icon="el-icon-edit">编辑</el-button>
                        <el-button size="mini" type="danger" slot="reference" icon="el-icon-delete" @click="deletePrompt(scope.row.videoTitle,scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page.sync="pageNo"
                       :page-size="pageSize"
                       layout="prev, pager, next, jumper"
                       :total="pagesTotalCount" style="margin-top: 10px">
        </el-pagination>
    </div>

</div>

<style lang="scss" scoped>
    el-menu {
        border-right: none;
    }
</style>

</body>

<script>
    new Vue({
        el:'#app',
        data:{
            videoList:[],
            //分页参数
            pageNo:1,//当前页码
            pageSize:10,//每页个数
            pageTotal:0,//页码数
            pagesTotalCount:0,//总条数
            //搜索内容
            typeName:'',
            userName:'',
        },
        mounted:function(){
            this.handleCurrentChange();
        },
        methods:{
            handleCurrentChange:function() {//分页改变时会触发
                var that = this;
                $.ajax({
                    url:"/videoWeb/searchVideo",
                    data:{
                        pageNo:this.pageNo,
                        pageSize:this.pageSize,
                        typeName:this.typeName,
                        userName:this.userName,
                    },
                    success:function(res){
                        console.log(res);
                        that.videoList = res.items;
                        that.pageTotal = res.pageTotal;
                        that.pagesTotalCount = res.pagesTotalCount;
                    }
                })
            },
            deleteVideo(id){//通过id删除视频信息
                var that = this;
                $.ajax({
                    url:"/videoWeb/deleteVideo",
                    data:{
                        id:id,
                        pageNo:this.pageNo,
                        pageSize:this.pageSize,
                        typeName:this.typeName,
                        userName:this.userName,
                    },
                    success:function(res){
                        that.videoList = res.items;
                        that.pageTotal = res.pageTotal;
                        that.pagesTotalCount = res.pagesTotalCount;
                    }
                })
            },
            deletePrompt(videoTitle,id) {//删除提示框
                this.$confirm('确定要删除视频【'+ videoTitle +'】吗?', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteVideo(id)
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getUserList();
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已经取消!'
                    });
                });
            },
        }
    })
</script>
</html>